<template>
  <div class="app-container">
    <!-- 页数 -->
    <el-form :inline="true" :model="query" :rules="rules" :ref="query">
      <el-form-item prop="page">
        <el-input
          v-model.number="query.page"
          placeholder="页数"
          clearable
          required
          style="width: 130px; margin-right: 20px"
          class="filter-item"
        />
      </el-form-item>
      <!-- 图书类型 -->
      <el-form-item prop="type">
        <el-select
          v-model="query.type"
          placeholder="图书类型"
          clearable
          required
          class="filter-item"
          style="width: 140px; margin-right: 20px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-button
        :loading="loading"
        class="filter-item"
        type="primary"
        icon="el-icon-cpu"
        @click="handleCrawl"
        style="margin-right: 5px"
      >
        {{ crawlText }}
      </el-button>
      <el-tag
        v-if="showMsg"
        style="
          width: 120px;
          display: inline-block;
          vertical-align: middle;
          margin-left: 30px;
        "
      >
        {{ msg }}</el-tag
      >
    </el-form>

    <!-- 展示数据表格 -->
    <el-table
      :data="bookList"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      :row-class-name="tableRowClassName"
    >
      <!-- 序号（非图书ID） -->
      <el-table-column align="center" label="ID" width="55">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <!--书名  -->
      <el-table-column label="图书名称" width="320" align="center">
        <template slot-scope="scope">
          {{ scope.row.bookName }}
        </template>
      </el-table-column>
      <!-- 作者 -->
      <el-table-column label="作者" width="100" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column>
      <!-- 类型 -->
      <el-table-column label="书籍类型" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.bookTypeStr }}
        </template>
      </el-table-column>

      <!-- 图书价格 -->
      <el-table-column
        class-name="status-col"
        label="价格"
        width="110"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.price }}
        </template>
      </el-table-column>
      <!-- 图书描述 -->
      <el-table-column label="图书描述" width="210" align="center">
        <template slot-scope="scope">
          {{ scope.row.desc }}
        </template>
      </el-table-column>
      <!-- 封面图片 -->
      <el-table-column
        align="center"
        prop="coverUrl"
        label="封面图片"
        width="120"
      >
        <template slot-scope="scope">
          <el-image
            :src="scope.row.coverUrl"
            :preview-src-list="[scope.row.coverUrl]"
          >
          </el-image>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { bookTypeOptions } from "@/utils";
import { transBookType } from "@/utils/book-type";
import { crawlData } from "@/api/crawl";
import { notify } from "@/utils/message";

export default {
  data() {
    return {
      // 爬虫、爬取条件
      query: {
        page: null,
        type: null,
      },
      // 选择框
      options: bookTypeOptions,
      bookList: [], // 爬取到的书籍列表
      // 爬取条件-规则
      rules: {
        page: [
          {
            type: "number",
            required: true,
            message: "爬取页数是必填项",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              if (value === "" || isNaN(Number(value))) {
                callback(new Error("请输入一个有效的数字"));
              } else if (value < 1 || value > 10) {
                callback(new Error("爬取页数必须在1-10之间"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        type: [
          { required: true, message: "图书类型是必选项", trigger: "blur" },
        ],
      },
      loading: false,
      crawlText: "开始爬取",
      msg: "",
      showMsg: false,
    };
  },
  watch: {},

  methods: {
    // 开启爬虫（先检验表单）
    handleCrawl() {
      this.$refs[this.query].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.crawlText = "爬取中";
          crawlData(this.query)
            .then((res) => {
              this.msg = "共爬取了" + res.data.total + "条数据";
              this.bookList = res.data.books;
              this.loading = false;
              notify(1, "爬取", "已展示爬取的数据并保存至数据库");
              this.crawlText = "开始爬取";
              this.showMsg = true;
            })
            .catch((err) => {
              notify(2, "爬取", "网络异常");
              this.showMsg = false;
              this.crawlText = "开始爬取";
            });
        } else {
          notify(2, "爬取", "输入信息不符合规则");
        }
      });
    },
    // 表格颜色
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "success-row"; // "success-row"
      }
      return "";
    },
  },
};
</script>
